<template>
    <!-- <div>
        <el-card shadow="none" class="flex justify-center mb-5">
            <div class="flex justify-center">
                <el-avatar :size="70" :src="$store.state.setting.avatar" />
            </div>
            <h2 class="flex justify-center mt-2 font-bold">{{ $store.state.setting.author }}</h2>
            <p class="flex justify-center mt-2 text-gray-500 text-sm">{{ $store.state.setting.introduction }}</p>
            <div class="flex justify-center mt-3">

                <el-tooltip v-if="$store.state.setting.githubHome" class="box-item" effect="dark" content="我的 GitHub"
                    placement="bottom-start">
                    <a :href="$store.state.setting.githubHome" target="_blank">
                        <svg t="1682482283799" class="icon mr-2 ml-2" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="8307" width="28" height="28">
                            <path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#4186F5" p-id="8308">
                            </path>
                            <path
                                d="M611.944 302.056c0-15.701 2.75-30.802 7.816-44.917a384.238 384.238 0 0 0-186.11 2.956c-74.501-50.063-93.407-71.902-107.975-39.618a136.243 136.243 0 0 0-3.961 102.287 149.515 149.515 0 0 0-39.949 104.806c0 148.743 92.139 181.875 179.961 191.61a83.898 83.898 0 0 0-25.192 51.863c-40.708 22.518-91.94 8.261-115.181-32.058a83.117 83.117 0 0 0-60.466-39.98s-38.871-0.361-2.879 23.408a102.97 102.97 0 0 1 43.912 56.906s23.398 75.279 133.531 51.863v65.913c0 10.443 13.548 42.63 102.328 42.63 71.275 0 94.913-30.385 94.913-42.987V690.485a90.052 90.052 0 0 0-26.996-72.03c83.996-9.381 173.328-40.204 179.6-176.098a164.706 164.706 0 0 1-21.129 1.365c-84.07 0-152.223-63.426-152.223-141.666z"
                                fill="#FFFFFF" p-id="8309"></path>
                            <path
                                d="M743.554 322.765a136.267 136.267 0 0 0-3.961-102.289s-32.396-10.445-107.979 39.618a385.536 385.536 0 0 0-11.853-2.956 132.623 132.623 0 0 0-7.816 44.917c0 78.24 68.152 141.667 152.222 141.667 7.171 0 14.222-0.472 21.129-1.365 0.231-5.03 0.363-10.187 0.363-15.509a149.534 149.534 0 0 0-42.105-104.083z"
                                fill="#FFFFFF" opacity=".4" p-id="8310"></path>
                        </svg>
                    </a>
                </el-tooltip>

                <el-tooltip v-if="$store.state.setting.csdnHome" class="box-item" effect="dark" content="我的 CSDN"
                    placement="bottom-start">
                    <a :href="$store.state.setting.csdnHome" target="_blank">
                        <svg t="1682483295332" class="icon mr-2 ml-2" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="9218" width="28" height="28">
                            <path
                                d="M512 1024C229.2224 1024 0 794.7776 0 512 0 229.2224 229.2224 0 512 0c282.7776 0 512 229.2224 512 512 0 282.7776-229.2224 512-512 512z m17.066667-413.525333c34.850133 4.352 68.778667 5.12 102.741333 2.0992 23.04-2.048 44.817067-8.362667 64.170667-21.9136 38.212267-26.794667 49.783467-85.1968 24.251733-123.050667-14.626133-21.7088-36.8128-30.344533-60.757333-35.498667-35.054933-7.543467-70.4512-5.751467-105.847467-3.413333-5.666133 0.3584-6.7584 3.072-7.236267 8.209067-3.072 32.682667-6.536533 65.314133-9.813333 97.962666-2.5088 24.814933-4.932267 49.629867-7.509333 75.605334z m53.4016-33.928534c1.962667-20.906667 3.6352-39.338667 5.4272-57.770666 1.553067-15.906133 3.413333-31.778133 4.727466-47.701334 0.3584-4.283733 1.553067-6.656 5.956267-6.382933 15.616 1.041067 31.709867 0.034133 46.728533 3.652267 36.488533 8.823467 48.725333 54.306133 23.3472 83.029333-15.8208 17.902933-36.7616 23.586133-59.255466 25.088-8.465067 0.546133-17.015467 0.085333-26.9312 0.085333zM512 434.295467c-2.184533-0.648533-3.5328-1.1776-4.932267-1.4336-37.717333-6.877867-75.690667-8.328533-113.646933-2.816-20.974933 3.037867-41.0112 9.489067-57.480533 23.330133-22.9888 19.319467-21.640533 46.848 4.4032 62.0032 13.056 7.594667 28.023467 12.509867 42.5984 17.288533 14.08 4.608 28.996267 6.826667 43.144533 11.264 12.5952 3.925333 14.011733 14.318933 3.584 22.306134-3.345067 2.56-7.441067 5.085867-11.537067 5.751466-11.195733 1.826133-22.698667 4.386133-33.826133 3.566934-24.098133-1.774933-48.042667-5.461333-72.5504-8.430934-1.365333 10.615467-2.935467 23.0912-4.5568 35.9424 4.181333 1.365333 7.68 2.730667 11.264 3.618134 33.9456 8.4992 68.386133 9.608533 102.912 5.12 20.087467-2.6112 39.4752-7.901867 56.695467-19.029334 28.603733-18.4832 36.693333-57.1904-4.676267-75.383466-14.506667-6.382933-30.190933-10.410667-45.482667-15.086934-11.4176-3.4816-23.313067-5.614933-34.525866-9.5232-9.7792-3.413333-11.144533-12.202667-3.037867-18.397866 4.6592-3.549867 10.717867-6.997333 16.384-7.3728a480.853333 480.853333 0 0 1 53.384533-0.853334c15.377067 0.699733 30.651733 3.549867 46.4896 5.5296L512 434.295467z m257.143467 2.048L750.933333 614.2976h54.152534c4.778667-45.636267 9.710933-90.7264 14.062933-135.8848 0.6144-6.365867 2.3552-8.840533 8.686933-9.0112 11.434667-0.273067 22.8864-1.979733 34.286934-1.570133 23.722667 0.853333 42.3936 9.728 38.4 43.264-2.901333 24.2688-5.597867 48.571733-8.2432 72.874666-1.092267 10.069333-1.826133 20.189867-2.730667 30.4128h55.330133c3.584-35.259733 7.9872-70.058667 10.496-104.994133 3.413333-47.4624-17.7664-73.3184-64.682666-80.213333-40.96-6.007467-81.339733-0.341333-121.5488 7.133866z m-483.498667 134.6048c-8.738133 1.297067-16.384 2.798933-24.098133 3.4816-25.6512 2.235733-51.319467 3.9424-76.305067-4.266667-13.909333-4.590933-24.6784-12.578133-29.7984-25.9584-7.901867-20.701867 0.887467-47.104 19.831467-60.3136 17.373867-12.117333 37.717333-15.9232 58.453333-15.9232 22.545067-0.017067 45.090133 2.423467 68.232533 3.84L307.2 432.298667c-15.069867-1.723733-29.4912-3.925333-43.997867-4.9152-41.0112-2.798933-80.64 2.6112-117.469866 20.462933-30.020267 14.557867-52.053333 36.010667-58.6752 68.130133-7.850667 38.144 11.537067 69.495467 51.7632 85.845334 19.1488 7.765333 39.287467 12.509867 60.0064 12.5952 24.746667 0.1024 49.493333-1.570133 74.205866-2.952534 3.106133-0.170667 8.311467-2.901333 8.669867-5.034666 1.979733-11.554133 2.730667-23.278933 3.9424-35.464534z"
                                fill="#DD1700" p-id="9219"></path>
                        </svg>
                    </a>
                </el-tooltip>

                <el-tooltip v-if="$store.state.setting.giteeHome" class="box-item" effect="dark" content="我的 Gitee"
                    placement="bottom-start">
                    <a :href="$store.state.setting.giteeHome" target="_blank">
                        <svg t="1682483184788" class="icon mr-2 ml-2" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="8999" width="28" height="28">
                            <path
                                d="M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512z m259.149-568.883h-290.74a25.293 25.293 0 0 0-25.292 25.293l-0.026 63.206c0 13.952 11.315 25.293 25.267 25.293h177.024c13.978 0 25.293 11.315 25.293 25.267v12.646a75.853 75.853 0 0 1-75.853 75.853h-240.23a25.293 25.293 0 0 1-25.267-25.293V417.203a75.853 75.853 0 0 1 75.827-75.853h353.946a25.293 25.293 0 0 0 25.267-25.292l0.077-63.207a25.293 25.293 0 0 0-25.268-25.293H417.152a189.62 189.62 0 0 0-189.62 189.645V771.15c0 13.977 11.316 25.293 25.294 25.293h372.94a170.65 170.65 0 0 0 170.65-170.65V480.384a25.293 25.293 0 0 0-25.293-25.267z"
                                fill="#C71D23" p-id="9000"></path>
                        </svg>
                    </a>
                </el-tooltip>

                <el-tooltip v-if="$store.state.setting.zhihuHome" class="box-item" effect="dark" content="我的知乎" placement="bottom-start">
                    <a :href="$store.state.setting.zhihuHome" target="_blank">
                        <svg t="1682483411912" class="icon mr-2 ml-2" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="9603" width="30" height="30">
                            <path
                                d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zM432.3 592.8l71 80.7c9.2 33-3.3 63.1-3.3 63.1l-95.7-111.9v-0.1c-8.9 29-20.1 57.3-33.3 84.7-22.6 45.7-55.2 54.7-89.5 57.7-34.4 3-23.3-5.3-23.3-5.3 68-55.5 78-87.8 96.8-123.1 11.9-22.3 20.4-64.3 25.3-96.8H264.1s4.8-31.2 19.2-41.7h101.6c0.6-15.3-1.3-102.8-2-131.4h-49.4c-9.2 45-41 56.7-48.1 60.1-7 3.4-23.6 7.1-21.1 0 2.6-7.1 27-46.2 43.2-110.7 16.3-64.6 63.9-62 63.9-62-12.8 22.5-22.4 73.6-22.4 73.6h159.7c10.1 0 10.6 39 10.6 39h-90.8c-0.7 22.7-2.8 83.8-5 131.4H519s12.2 15.4 12.2 41.7h-110l-0.1 1.5c-1.5 20.4-6.3 43.9-12.9 67.6l24.1-18.1z m335.5 116h-87.6l-69.5 46.6-16.4-46.6h-40.1V321.5h213.6v387.3zM408.2 611s0-0.1 0 0z m216 94.3l56.8-38.1h45.6-0.1V364.7H596.7v302.5h14.1z"
                                fill="#1296DB" p-id="9604"></path>
                        </svg>
                    </a>
                </el-tooltip>


            </div>
        </el-card>
    </div> -->


    <div class="mb-3 w-full bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
        <!-- 已登录状态 -->
        <div v-if="isLoggedIn" class="flex flex-col items-center p-6">
            <img class="w-20 h-20 mb-3 rounded-full shadow-lg border-2 border-gray-200" 
                 :src="userInfo.avatar || defaultAvatar" 
                 :alt="userInfo.name + '头像'" />
            <h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">
                {{ userInfo.name }}
            </h5>
            <span class="text-sm text-gray-500 dark:text-gray-400 mb-4">
                {{ userInfo.introduction }}
            </span>
            
            <!-- 社交链接 -->
            <div class="flex space-x-3">
                <a v-if="socialLinks.githubHome" 
                   :href="socialLinks.githubHome" 
                   target="_blank"
                   class="text-gray-600 hover:text-blue-600 transition-colors"
                   title="我的 GitHub">
                    <SvgIcon icon="mdi:github" class="text-28px" />
                </a>
                
                <a v-if="socialLinks.csdnHome" 
                   :href="socialLinks.csdnHome" 
                   target="_blank"
                   class="text-gray-600 hover:text-red-600 transition-colors"
                   title="我的 CSDN">
                    <SvgIcon icon="mdi:web" class="text-28px" />
                </a>
                
                <a v-if="socialLinks.giteeHome" 
                   :href="socialLinks.giteeHome" 
                   target="_blank"
                   class="text-gray-600 hover:text-red-500 transition-colors"
                   title="我的 Gitee">
                    <SvgIcon icon="mdi:git" class="text-28px" />
                </a>
                
                <a v-if="socialLinks.zhihuHome" 
                   :href="socialLinks.zhihuHome" 
                   target="_blank"
                   class="text-gray-600 hover:text-blue-500 transition-colors"
                   title="我的知乎">
                    <SvgIcon icon="mdi:comment-question-outline" class="text-28px" />
                </a>
            </div>
            
            <!-- 退出登录按钮 -->
            <button @click="handleLogout" 
                    class="mt-4 px-4 py-2 text-sm text-gray-600 hover:text-red-600 transition-colors">
                退出登录
            </button>
        </div>

        <!-- 未登录状态 -->
        <div v-else class="flex flex-col items-center p-6">
            <div class="w-20 h-20 mb-3 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center">
                <SvgIcon icon="mdi:account-outline" class="text-32px text-gray-400" />
            </div>
            <h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">
                未登录
            </h5>
            <span class="text-sm text-gray-500 dark:text-gray-400 mb-4">
                登录后可查看个人信息
            </span>
            
            <!-- 登录按钮 -->
            <div class="flex space-x-3">
                <button @click="handleLogin" 
                        class="px-6 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors">
                    登录
                </button>
                <button @click="handleRegister" 
                        class="px-6 py-2 border border-gray-300 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-50 transition-colors">
                    注册
                </button>
            </div>
            
            <!-- 社交链接（未登录也显示） -->
            <div class="flex space-x-3 mt-4 pt-4 border-t border-gray-200 dark:border-gray-600">
                <a v-if="socialLinks.githubHome" 
                   :href="socialLinks.githubHome" 
                   target="_blank"
                   class="text-gray-600 hover:text-blue-600 transition-colors"
                   title="我的 GitHub">
                    <SvgIcon icon="mdi:github" class="text-24px" />
                </a>
                
                <a v-if="socialLinks.csdnHome" 
                   :href="socialLinks.csdnHome" 
                   target="_blank"
                   class="text-gray-600 hover:text-red-600 transition-colors"
                   title="我的 CSDN">
                    <SvgIcon icon="mdi:web" class="text-24px" />
                </a>
                
                <a v-if="socialLinks.giteeHome" 
                   :href="socialLinks.giteeHome" 
                   target="_blank"
                   class="text-gray-600 hover:text-red-500 transition-colors"
                   title="我的 Gitee">
                    <SvgIcon icon="mdi:git" class="text-24px" />
                </a>
                
                <a v-if="socialLinks.zhihuHome" 
                   :href="socialLinks.zhihuHome" 
                   target="_blank"
                   class="text-gray-600 hover:text-blue-500 transition-colors"
                   title="我的知乎">
                    <SvgIcon icon="mdi:comment-question-outline" class="text-24px" />
                </a>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { defineComponent as _defineComponent } from "vue";
import { ref, computed, onMounted } from 'vue';
import { useAuthStore } from '@/store/modules/auth';
import SvgIcon from "@/components/custom/svg-icon.vue";

const defaultAvatar = "https://via.placeholder.com/80x80/E5E7EB/9CA3AF?text=头像";

// 使用Pinia的auth store
const authStore = useAuthStore();

// 获取用户登录状态和信息
const isLoggedIn = computed(() => authStore.isLogin);
const userInfo = computed(() => authStore.userInfo);

// 社交链接
const socialLinks = computed(() => ({
    githubHome: authStore.setting?.githubHome || '',
    csdnHome: authStore.setting?.csdnHome || '', 
    giteeHome: authStore.setting?.giteeHome || '',
    zhihuHome: authStore.setting?.zhihuHome || ''
}));

// 登录处理
const handleLogin = () => {
  // 这里可以添加登录逻辑
  console.log('跳转到登录页面');
};

// 退出登录
const handleLogout = () => {
  authStore.logout();
};

// 处理注册
const handleRegister = () => {
    // 这里可以跳转到注册页面或打开注册弹窗
    console.log('跳转到注册页面');
};

// 组件挂载时检查登录状态
onMounted(() => {
    // 这里可以检查本地存储或调用API检查登录状态
    // 示例：从localStorage检查token
    const token = localStorage.getItem('userToken');
    authStore.isLogin = !!token;
});
</script>